<template>
    <pre v-highlight>
            <code class="javascript" ref="codeBox">
                  <slot>code</slot>
            </code>
        </pre>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component
export default class CodeBox extends Vue {
    @Prop({
        default: 0,
        type: Number,
    })
    private width!: number;
    private mounted() {
        if (this.width) {
            const boxDom = this.$refs.codeBox as HTMLElement;
            boxDom.style.width = this.width + 'vw';
        }
    }
}
</script>
<style scoped>
code {
    width: 35vw;
}
</style>